<template>
  <div>
    <h3 class="row-title">图标</h3>
    <div class="doc__main">
      <el-row :gutter="10" type="flex" style="flex-wrap:wrap">
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-export"></span>
          <div class="name">
            export
          </div>
          <div class="code-name">.icon-export
          </div>
        </el-col>
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-adduser"></span>
          <div class="name">
            adduser
          </div>
          <div class="code-name">.icon-adduser
          </div>
        </el-col>
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-cxsz"></span>
          <div class="name">
            cxsz
          </div>
          <div class="code-name">.icon-cxsz
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-admin"></span>
          <div class="name">
            admin
          </div>
          <div class="code-name">.icon-admin
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-bjqpz"></span>
          <div class="name">
            bjqpz
          </div>
          <div class="code-name">.icon-bjqpz
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-stat"></span>
          <div class="name">
            statistics
          </div>
          <div class="code-name">.icon-stat
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-mbgl"></span>
          <div class="name">
            mbgl
          </div>
          <div class="code-name">.icon-mbgl
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-sjcz"></span>
          <div class="name">
            sjcz
          </div>
          <div class="code-name">.icon-sjcz
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-yxls"></span>
          <div class="name">
            yxls
          </div>
          <div class="code-name">.icon-yxls
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-statistics2"></span>
          <div class="name">
            statistics2
          </div>
          <div class="code-name">.icon-statistics2
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-gj"></span>
          <div class="name">
            gj
          </div>
          <div class="code-name">.icon-gj
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-addfile"></span>
          <div class="name">
            addfile
          </div>
          <div class="code-name">.icon-addfile
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-menu"></span>
          <div class="name">
            menu
          </div>
          <div class="code-name">.icon-menu
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-refresh-thin"></span>
          <div class="name">
            refresh-thin
          </div>
          <div class="code-name">.icon-refresh-thin
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-about"></span>
          <div class="name">
            about
          </div>
          <div class="code-name">.icon-about
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-drdc"></span>
          <div class="name">
            drdc
          </div>
          <div class="code-name">.icon-drdc
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-target"></span>
          <div class="name">
            target
          </div>
          <div class="code-name">.icon-target
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-link"></span>
          <div class="name">
            link
          </div>
          <div class="code-name">.icon-link
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-setting3"></span>
          <div class="name">
            setting3
          </div>
          <div class="code-name">.icon-setting3
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-flag"></span>
          <div class="name">
            flag
          </div>
          <div class="code-name">.icon-flag
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-filter"></span>
          <div class="name">
            filter
          </div>
          <div class="code-name">.icon-filter
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-question"></span>
          <div class="name">
            question
          </div>
          <div class="code-name">.icon-question
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-right2"></span>
          <div class="name">
            right2
          </div>
          <div class="code-name">.icon-right2
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-save"></span>
          <div class="name">
            save
          </div>
          <div class="code-name">.icon-save
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-stop"></span>
          <div class="name">
            stop
          </div>
          <div class="code-name">.icon-stop
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-text"></span>
          <div class="name">
            text
          </div>
          <div class="code-name">.icon-text
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-run"></span>
          <div class="name">
            run
          </div>
          <div class="code-name">.icon-run
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-calendar"></span>
          <div class="name">
            calendar
          </div>
          <div class="code-name">.icon-calendar
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-star"></span>
          <div class="name">
            star
          </div>
          <div class="code-name">.icon-star
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-collapse"></span>
          <div class="name">
            collapse
          </div>
          <div class="code-name">.icon-collapse
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-edit"></span>
          <div class="name">
            edit
          </div>
          <div class="code-name">.icon-edit
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-reset"></span>
          <div class="name">
            reset
          </div>
          <div class="code-name">.icon-reset
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-feedback"></span>
          <div class="name">
            feedback
          </div>
          <div class="code-name">.icon-feedback
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-user"></span>
          <div class="name">
            user
          </div>
          <div class="code-name">.icon-user
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-use"></span>
          <div class="name">
            use
          </div>
          <div class="code-name">.icon-use
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-forbid"></span>
          <div class="name">
            forbid
          </div>
          <div class="code-name">.icon-forbid
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-switch"></span>
          <div class="name">
            switch
          </div>
          <div class="code-name">.icon-switch
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-close"></span>
          <div class="name">
            close
          </div>
          <div class="code-name">.icon-close
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-plus"></span>
          <div class="name">
            plus
          </div>
          <div class="code-name">.icon-plus
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-attention3"></span>
          <div class="name">
            attention3
          </div>
          <div class="code-name">.icon-attention3
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-next"></span>
          <div class="name">
            next
          </div>
          <div class="code-name">.icon-next
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-prev"></span>
          <div class="name">
            prev
          </div>
          <div class="code-name">.icon-prev
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-next2"></span>
          <div class="name">
            next2
          </div>
          <div class="code-name">.icon-next2
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-prev2"></span>
          <div class="name">
            prev2
          </div>
          <div class="code-name">.icon-prev2
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-logout"></span>
          <div class="name">
            logout
          </div>
          <div class="code-name">.icon-logout
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-attention2"></span>
          <div class="name">
            attention2
          </div>
          <div class="code-name">.icon-attention2
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-minus"></span>
          <div class="name">
            minus
          </div>
          <div class="code-name">.icon-minus
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-right"></span>
          <div class="name">
            right
          </div>
          <div class="code-name">.icon-right
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-wrong"></span>
          <div class="name">
            wrong
          </div>
          <div class="code-name">.icon-wrong
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-refresh"></span>
          <div class="name">
            refresh
          </div>
          <div class="code-name">.icon-refresh
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-upload"></span>
          <div class="name">
            upload
          </div>
          <div class="code-name">.icon-upload
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-download"></span>
          <div class="name">
            download
          </div>
          <div class="code-name">.icon-download
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-dustbin"></span>
          <div class="name">
            dustbin
          </div>
          <div class="code-name">.icon-dustbin
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-attention"></span>
          <div class="name">
            attention
          </div>
          <div class="code-name">.icon-attention
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-relation"></span>
          <div class="name">
            relation
          </div>
          <div class="code-name">.icon-relation
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-menu1"></span>
          <div class="name">
            menu
          </div>
          <div class="code-name">.icon-menu1
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-setting"></span>
          <div class="name">
            setting
          </div>
          <div class="code-name">.icon-setting
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-qjsz"></span>
          <div class="name">
            globalSetting
          </div>
          <div class="code-name">.icon-qjsz
          </div>
        </el-col>
        
        <el-col :span="3" class="dib">
          <span class="icon iconfont icon-yhgl"></span>
          <div class="name">
            userManage
          </div>
          <div class="code-name">.icon-yhgl
          </div>
        </el-col>
      
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {

      }
    }
  }
</script>

<style lang="scss">
  .dib {
    text-align: center;
    margin-bottom: 30px;
    .icon {
      font-size: 36px;
    }
  }
 
</style>
